<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签页</title>
    <link rel="stylesheet" href="./view/标签页/styles.css">
</head>
<body>

<!-- Unnamed (Rectangle) -->
<div id="u2492" class="ax_default box_1">
    <div id="u2492_div" class=""></div>
    <div id="u2492_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2493" class="ax_default box_1">
    <div id="u2493_div" class=""></div>
    <div id="u2493_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2494" class="ax_default box_1">
    <div id="u2494_div" class=""></div>
    <div id="u2494_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2495" class="ax_default box_1">
    <div id="u2495_div" class=""></div>
    <div id="u2495_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>
<!--标签页 Unnamed (Rectangle) -->
<div id="u2496" class="ax_default heading_1">
    <div id="u2496_div" class=""></div>
    <div id="u2496_text" class="text ">
        <p><span>Tabs 标签页</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2497" class="ax_default heading_1">
    <div id="u2497_div" class=""></div>
    <div id="u2497_text" class="text ">
        <p><span>概述</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2498" class="ax_default label">
    <div id="u2498_div" class=""></div>
    <div id="u2498_text" class="text ">
        <p><span>选项卡切换组件，常用于平级区域大块内容的的收纳和展现。</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2499" class="ax_default label">
    <div id="u2499_div" class=""></div>
    <div id="u2499_text" class="text ">
        <p><span>基础用法</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2500" class="ax_default label">
    <div id="u2500_div" class=""></div>
    <div id="u2500_text" class="text ">
        <p><span>选项和内容分离，内容使用动态面板制作，选项卡使用交互样式；</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2501" class="ax_default box_1 selected" selectiongroup="tab-list-1">
    <div id="u2501_div" class="selected"></div>
    <div id="u2501_text" class="text ">
        <p><span>标签一</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2502" class="ax_default box_1" selectiongroup="tab-list-1">
    <div id="u2502_div" class=""></div>
    <div id="u2502_text" class="text ">
        <p><span>标签二</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2503" class="ax_default box_1" selectiongroup="tab-list-1">
    <div id="u2503_div" class=""></div>
    <div id="u2503_text" class="text ">
        <p><span>标签三</span></p>
    </div>
</div>

<!-- tab-content-1 (Dynamic Panel) -->
<div id="u2504" class="ax_default" data-label="tab-content-1">
    <div id="u2504_state0" class="panel_state" data-label="State1" style="">
        <div id="u2504_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2505" class="ax_default box_1">
                <img id="u2505_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2505_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2504_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2504_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2506" class="ax_default box_1">
                <img id="u2506_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2506_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2504_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2504_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2507" class="ax_default box_1">
                <img id="u2507_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2507_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2508" class="ax_default label">
    <div id="u2508_div" class=""></div>
    <div id="u2508_text" class="text ">
        <p><span>禁用</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2509" class="ax_default label">
    <div id="u2509_div" class=""></div>
    <div id="u2509_text" class="text ">
        <p><span>禁用某一项，每一个选项卡都支持disabled的交互样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2510" class="ax_default box_1">
    <div id="u2510_div" class=""></div>
    <div id="u2510_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2511" class="ax_default box_1 selected" selectiongroup="tab-list-2">
    <div id="u2511_div" class="selected"></div>
    <div id="u2511_text" class="text ">
        <p><span>标签一</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2512" class="ax_default box_1 disabled" selectiongroup="tab-list-2">
    <div id="u2512_div" class="disabled"></div>
    <div id="u2512_text" class="text ">
        <p><span>标签二（已失效）</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2513" class="ax_default box_1" selectiongroup="tab-list-2">
    <div id="u2513_div" class=""></div>
    <div id="u2513_text" class="text ">
        <p><span>标签三</span></p>
    </div>
</div>

<!-- tab-content-2 (Dynamic Panel) -->
<div id="u2514" class="ax_default" data-label="tab-content-2">
    <div id="u2514_state0" class="panel_state" data-label="State1" style="">
        <div id="u2514_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2515" class="ax_default box_1">
                <img id="u2515_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2515_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2514_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2514_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2516" class="ax_default box_1">
                <img id="u2516_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2516_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2514_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2514_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2517" class="ax_default box_1">
                <img id="u2517_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2517_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2518" class="ax_default label">
    <div id="u2518_div" class=""></div>
    <div id="u2518_text" class="text ">
        <p><span>图标</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2519" class="ax_default label">
    <div id="u2519_div" class=""></div>
    <div id="u2519_text" class="text ">
        <p><span>在文本中增加图标即可实现图标样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2520" class="ax_default box_1 selected" selectiongroup="tab-list-3">
    <div id="u2520_div" class="selected"></div>
    <div id="u2520_text" class="text ">
        <p><span style="font-family:'Ionicons';color:#62697C;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#515A6E;">macOS</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2521" class="ax_default box_1" selectiongroup="tab-list-3">
    <div id="u2521_div" class=""></div>
    <div id="u2521_text" class="text ">
        <p><span style="font-family:'Ionicons';color:#62697C;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#515A6E;">Windows</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2522" class="ax_default box_1" selectiongroup="tab-list-3">
    <div id="u2522_div" class=""></div>
    <div id="u2522_text" class="text ">
        <p><span style="font-family:'Ionicons';color:#62697C;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';color:#515A6E;">Linux</span></p>
    </div>
</div>

<!-- tab-content-3 (Dynamic Panel) -->
<div id="u2523" class="ax_default" data-label="tab-content-3">
    <div id="u2523_state0" class="panel_state" data-label="State1" style="">
        <div id="u2523_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2524" class="ax_default box_1">
                <img id="u2524_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2524_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2523_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2523_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2525" class="ax_default box_1">
                <img id="u2525_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2525_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2523_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2523_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2526" class="ax_default box_1">
                <img id="u2526_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2526_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2527" class="ax_default label">
    <div id="u2527_div" class=""></div>
    <div id="u2527_text" class="text ">
        <p><span>迷你型</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2528" class="ax_default label">
    <div id="u2528_div" class=""></div>
    <div id="u2528_text" class="text ">
        <p><span>文字缩小的版本</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2529" class="ax_default box_1">
    <div id="u2529_div" class=""></div>
    <div id="u2529_text" class="text ">
        <p><span>&nbsp;</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2530" class="ax_default box_1 selected" selectiongroup="tab-list-44">
    <div id="u2530_div" class="selected"></div>
    <div id="u2530_text" class="text ">
        <p><span>标签一</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2531" class="ax_default box_1" selectiongroup="tab-list-44">
    <div id="u2531_div" class=""></div>
    <div id="u2531_text" class="text ">
        <p><span>标签二</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2532" class="ax_default box_1" selectiongroup="tab-list-44">
    <div id="u2532_div" class=""></div>
    <div id="u2532_text" class="text ">
        <p><span>标签三</span></p>
    </div>
</div>

<!-- tab-content-4 (Dynamic Panel) -->
<div id="u2533" class="ax_default" data-label="tab-content-4">
    <div id="u2533_state0" class="panel_state" data-label="State1" style="">
        <div id="u2533_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2534" class="ax_default box_1">
                <img id="u2534_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2534_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2533_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2533_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2535" class="ax_default box_1">
                <img id="u2535_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2535_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2533_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2533_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2536" class="ax_default box_1">
                <img id="u2536_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2536_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2537" class="ax_default box_1 selected" selectiongroup="tab-list-card-1">
    <div id="u2537_div" class="selected"></div>
    <div id="u2537_text" class="text ">
        <p><span>标签一</span></p>
    </div>
</div>

<!-- tab-content-5 (Dynamic Panel) -->
<div id="u2538" class="ax_default" data-label="tab-content-5">
    <div id="u2538_state0" class="panel_state" data-label="State1" style="">
        <div id="u2538_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2539" class="ax_default box_1">
                <img id="u2539_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2539_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2538_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2538_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2540" class="ax_default box_1">
                <img id="u2540_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2540_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2538_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2538_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2541" class="ax_default box_1">
                <img id="u2541_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2541_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2538_state3" class="panel_state" data-label="State4" style="visibility: hidden;">
        <div id="u2538_state3_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2542" class="ax_default box_1">
                <img id="u2542_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2542_text" class="text ">
                    <p><span>标签四的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2543" class="ax_default label">
    <div id="u2543_div" class=""></div>
    <div id="u2543_text" class="text ">
        <p><span>卡片样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2544" class="ax_default label">
    <div id="u2544_div" class=""></div>
    <div id="u2544_text" class="text ">
        <p><span>常用于容器顶部</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2545" class="ax_default box_1" selectiongroup="tab-list-card-1">
    <div id="u2545_div" class=""></div>
    <div id="u2545_text" class="text ">
        <p><span>标签二</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2546" class="ax_default box_1" selectiongroup="tab-list-card-1">
    <div id="u2546_div" class=""></div>
    <div id="u2546_text" class="text ">
        <p><span>标签三</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2547" class="ax_default box_1 disabled" selectiongroup="tab-list-card-1">
    <div id="u2547_div" class="disabled"></div>
    <div id="u2547_text" class="text ">
        <p><span>标签四（已失效）</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2548" class="ax_default label">
    <div id="u2548_div" class=""></div>
    <div id="u2548_text" class="text ">
        <p><span>可关闭</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2549" class="ax_default label">
    <div id="u2549_div" class=""></div>
    <div id="u2549_text" class="text ">
        <p><span>没有关闭的效果，只做样式展示</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2550" class="ax_default box_1 selected" selectiongroup="tab-list-card-2">
    <div id="u2550_div" class="selected"></div>
    <div id="u2550_text" class="text ">
        <p><span>标签一</span></p>
    </div>
</div>

<!-- tab-content-6 (Dynamic Panel) -->
<div id="u2551" class="ax_default" data-label="tab-content-6">
    <div id="u2551_state0" class="panel_state" data-label="State1" style="">
        <div id="u2551_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2552" class="ax_default box_1">
                <img id="u2552_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2552_text" class="text ">
                    <p><span>标签一的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2551_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u2551_state1_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2553" class="ax_default box_1">
                <img id="u2553_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2553_text" class="text ">
                    <p><span>标签二的内容</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u2551_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u2551_state2_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u2554" class="ax_default box_1">
                <img id="u2554_img" class="img " src="assets/images/标签页/u2505.svg"/>
                <div id="u2554_text" class="text ">
                    <p><span>标签三的内容</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2555" class="ax_default box_1" selectiongroup="tab-list-card-2">
    <div id="u2555_div" class=""></div>
    <div id="u2555_text" class="text ">
        <p><span>标签二</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2556" class="ax_default box_1" selectiongroup="tab-list-card-2">
    <div id="u2556_div" class=""></div>
    <div id="u2556_text" class="text ">
        <p><span>标签三</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u2557" class="ax_default label">
    <div id="u2557_div" class=""></div>
    <div id="u2557_text" class="text ">
        <p><span></span></p>
    </div>
</div>
</body>
</html>
